<template>
  <div class="wrap">
    <van-notice-bar scrollable :text="warnMsg" left-icon="volume-o" />
    <p class="title">提交银行卡信息</p>
    <van-panel title="身份信息">
      <div class="list-item">
        <span class="name">用户名:</span>
        <span v-text="username"></span>
      </div>
      <div class="list-item">
        <span class="name">手机号:</span>
        <span v-text="mobile"></span>
      </div>
      <div class="list-item">
        <span class="name">身份证号:</span>
        <span v-text="idCard"></span>
      </div>
    </van-panel>
    <van-radio-group v-model="radio">
      <van-panel
        v-for="(item,index) in bankCardList"
        :key="item.bankCardNo"
        title="银行卡信息"
        style="margin-top:10px"
      >
        <van-field v-model.trim="item.affiliatedBank"  clearable label="开户行:" placeholder="请输入开户行" />
        <van-field v-model.trim="item.bankName"  clearable label="开户行地址:" placeholder="请输入开户行地址" />
        <van-field
          v-model.trim="item.bankCardNo"
          maxlength="25"
          clearable
          label="卡号:"
          placeholder="请输入卡号"
          onkeyup="value=value.replace(/\s/g,'')"
        />
        <div slot="footer" style="height:28px">
          <van-radio v-bind:name="index" style="float:right;height:28px">使用该卡进行收款</van-radio>
        </div>
      </van-panel>
    </van-radio-group>
    <div class="addcard" @click="addCard">添加新卡</div>
    <van-divider style="font-size:12px">请务必确认所输入信息系本人银行卡信息且准确无误，若因输入错误造成的资金损失，由本人自行承担</van-divider>
    <div class="btn" @click="handleCardInfo">提交</div>
  </div>
</template>
<script>
import {
  NoticeBar,
  Panel,
  Field,
  DropdownMenu,
  DropdownItem,
  Divider,
  Radio,
  RadioGroup,
} from "vant";
import { getData } from "../utils/api";
export default {
  name: "bankCardInfo",
  data() {
    return {
      username: sessionStorage.getItem("name"),
      idCard: sessionStorage.getItem("idCard"),
      mobile: sessionStorage.getItem("mobile"),
      radio: 0,
      warnMsg: `${sessionStorage.getItem(
        "name"
      )}，您好！请尽快完成银行卡绑定，方便我们线下给您打款`,
      bankCardList: []
    };
  },
  methods: {
    addCard() {
      this.bankCardList.push({
        affiliatedBank: "",
        bankName: "",
        bankCardNo: ""
      });
    },
    handleCardInfo() {
    
      //司机绑定信息
      if (!this.bankCardList.length) {
       alert("请您先添加银行卡信息");
      } else if(!((this.bankCardList[this.radio].affiliatedBank)&&(this.bankCardList[this.radio].bankCardNo)&&(this.bankCardList[this.radio].bankName))) {
        alert("要添加的银行卡信息不能为空");
      } else {
          //添加新银行卡
      // getData({
      //   method: "bindBankCard",
      //   dataBody: {
      //     cardHolder: sessionStorage.getItem("name"),
      //     bankCardNo: this.bankCardList[this.radio].bankCardNo,
      //     affiliatedBank: this.bankCardList[this.radio].affiliatedBank,
      //     bankName: this.bankCardList[this.radio].bankName,
      //     bankCardType: 3,
      //     currency: "1" // 默认1 人民币
      //   }
      // });
      //发送司机绑定信息
        getData({
          method: "bindShortDriver",
          dataBody: {
            driverName: this.username.replace(/\s*/g,""),
            identityNo: this.idCard.replace(/\s*/g,""),
            bankCardNo: this.bankCardList[this.radio].bankCardNo.replace(/\s*/g,""),
            openCardBankName: this.bankCardList[this.radio].bankName.replace(/\s*/g,""),
            openCardBank: this.bankCardList[this.radio].affiliatedBank.replace(/\s*/g,""),
            companyId: sessionStorage.getItem("companyId"),
            userId: sessionStorage.getItem("userUuid"),
            mobile: this.mobile.replace(/\s*/g,"")
          }
        }).then(res => {
          if (res.data.result.code != 0) {
            // Dialog.alert({
            //   message: res.data.result.msg
            // });
            if (res.data.result.msg == "请求数据丢失，请重新登陆") {
                  alert(res.data.result.msg)
                  this.$router.push({ path: "/" });
              } else {
                  alert(res.data.result.msg);
              }
          } else {
            this.$router.push({ path: "/bindSuccess" });
          }
        });
      }
    }
  },
  mounted() {
    getData({
      method: "listBankCard",
      dataBody: {}
    }).then(res => {
      this.bankCardList = res.data.result.data.bankCardList.list;
    });
  }
};
</script>
<style scoped>
.wrap {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  overflow-y: auto;
  background-color: rgb(248, 248, 248);
}
.title {
  padding: 10px 16px;
  color: #323233;
  font-size: 14px;
  margin: 0;
  color: rgba(69, 90, 100, 0.6);
}
.btn {
  margin: auto;
  width: 120px;
  height: 44px;
  border-radius: 22px;
  background: #0082d7;
  text-align: center;
  line-height: 44px;
  color: #fff;
  margin-top: 22px;
  box-shadow: 0px 0px 12px 0px rgba(23, 153, 238, 1);
}
.van-cell__title {
  color: #0082d7;
}
.addcard {
  text-align: right;
  color: #0082d7;
  font-size: 14px;
  padding: 10px 16px;
}
.list-item {
  color: #323233;
  font-size: 14px;
  line-height: 24px;
  height: 24px;
  padding: 10px 0px;
  margin-left: 16px;
  border-bottom: 1px solid #f4f4f4;
}
.name {
  display: inline-block;
  width: 90px;
}
</style>